<template>
	<view>
		<view style="border-left: none; border-right: none; padding-bottom: 0; ">
			<uni-segmented-control :current="cuIndex" :values="curItems" @clickItem="changeBuild"
				styleType="text"></uni-segmented-control>

			<view v-if="dateShow" class="datePickBox">
				<uni-datetime-picker type="date" v-model="searchDate" @change="changeDate" :clear-icon="false"
					style="background-color: #e2e2e2;  border-radius: 20rpx;" />
			</view>
			<view class="" style="background-color: #f1f1f1;">
				<view style="background-color: #fff; padding: 40rpx 0 20rpx 0;">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text">
					</uni-segmented-control>
					<view style="padding: 40rpx 30rpx;">
						<view
							style="display: flex; background-color: #f1f1f1; align-items: center; border-radius: 20rpx; height: 70rpx;">
							<view class="listBox1" :class="checkValue == 0 ? 'check' :'' " @click="staticsSearch(0)">日统计
							</view>
							<view class="listBox" :class="checkValue == 1 ? 'check' :'' " @click="staticsSearch(1)">周统计
							</view>
							<view class="listBox" :class="checkValue == 2 ? 'check' :'' " @click="staticsSearch(2)">月统计
							</view>
							<view class="listBox" :class="checkValue == 3 ? 'check' :'' " @click="staticsSearch(3)">自定义
							</view>
						</view>
					</view>
				</view>

				<view class="" v-if="showBox"
					style="padding: 30rpx 40rpx; margin-top: 20rpx; background-color: #fff; border-radius: 20rpx;">
					<view class="" style="padding: 0 10rpx;">开始日期</view>
					<view class="" style="border-bottom: 1rpx solid #aaa; padding: 10rpx 0;">
						<uni-datetime-picker type="date" v-model="startDate" @change="changeStartDate"
							:clear-icon="false" placeholder="请输入开始时间"
							style="background-color: #e2e2e2;  border-radius: 20rpx;" />
					</view>
					<view class="" style="padding: 0 10rpx; margin-top: 20rpx;" >结束日期</view>
					<view class="" style="padding: 10rpx 0;">
						<uni-datetime-picker type="date" v-model="endDate" @change="changeEndDate" :clear-icon="false"
							placeholder="请输入结束时间" style="background-color: #e2e2e2;  border-radius: 20rpx;" />
					</view>
				</view>
			</view>
			<view class="" style="height: 50rpx; background-color: #f1f1f1;"></view>
			<view v-show="current === 0" style="background-color: #f1f1f1;">
				<view class="boxContent" :class="index !=0 ?'topContent' : ''" v-for="(item,index) in allTypeList"
					:key="index">
					<view style="text-align: left;" class="header">
						<view class="box">宿舍号</view>
						<view class="box" style="font-weight: 700;">{{item.buildingNo}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">姓名</view>
						<view class="box">{{item.studentName}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">班级</view>
						<view class="box">{{item.className}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">请假次数</view>
						<view class="box" style="font-weight: 700; font-size: 50rpx;">{{item.count}}</view>
					</view>
				</view>
				<view class="pic" v-if="allTypeList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode="">
					</image>
				</view>
			</view>

			<view v-show="current === 1" style="background-color: #f1f1f1;">
				<view class="boxContent" :class="index !=0 ?'topContent' : ''" v-for="(item,index) in allTypeList"
					:key="index">
					<view style="text-align: left;" class="header">
						<view class="box">宿舍号</view>
						<view class="box" style="font-weight: 700;">{{item.buildingNo}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">姓名</view>
						<view class="box">{{item.studentName}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">班级</view>
						<view class="box">{{item.className}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">未打卡次数</view>
						<view class="box" style="font-weight: 700; font-size: 50rpx;">{{item.count}}</view>
					</view>
				</view>
				<view class="pic" v-if="allTypeList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode="">
					</image>
				</view>
			</view>
			<view v-show="current === 2" style="background-color: #f1f1f1;">
				<view class="boxContent" :class="index !=0 ?'topContent' : ''" v-for="(item,index) in allTypeList"
					:key="index">
					<view style="text-align: left;" class="header">
						<view class="box">宿舍号</view>
						<view class="box" style="font-weight: 700;">{{item.buildingNo}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">姓名</view>
						<view class="box">{{item.studentName}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">班级</view>
						<view class="box">{{item.className}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">缺勤次数</view>
						<view class="box" style="font-weight: 700; font-size: 50rpx;">{{item.count}}</view>
					</view>
				</view>
				<view class="pic" v-if="allTypeList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode="">
					</image>
				</view>
			</view>
			<view v-show="current === 3" style="background-color: #f1f1f1;">
				<view class="boxContent" :class="index !=0 ?'topContent' : ''" v-for="(item,index) in allTypeList"
					:key="index">
					<view style="text-align: left;" class="header">
						<view class="box">宿舍号</view>
						<view class="box" style="font-weight: 700;">{{item.buildingNo}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">姓名</view>
						<view class="box">{{item.studentName}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">班级</view>
						<view class="box">{{item.className}}</view>
					</view>
					<view style="width: 1rpx; height: 50rpx; background-color: #f1f1f1;"></view>
					<view class="header">
						<view class="box">违纪次数</view>
						<view class="box" style="font-weight: 700; font-size: 50rpx;">{{item.count}}</view>
					</view>
				</view>
				<view class="pic" style="" v-if="allTypeList.length <= 0">
					<image src="https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/wujilu.png" mode="">
					</image>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import statistics from "@/api/modules/statistics.js"
	import {
		parseTime
	} from "@/utils/date.js"
	export default {
		data() {
			return {
				bzrUrl: "/pages/index/supervisorIndex",
				topName: "出勤异常统计",
				userName: "",
				current: 0,
				items: ['请假', '未打卡', '缺勤', '违纪'],
				searchDate: "",
				applyList: [],
				notCheckList: [],
				absenceFromDutyList: [],
				violationList: [],
				buildingNo: "1",
				cuIndex: 0,
				curItems: ["畔湖苑", "听湖苑"],
				checkValue: 0,
				// currentvalue: 0,
				showBox: false,
				startDate: "",
				endDate: "",
				dateShow: true,
				attenceStauts: "4",
				weekDate: [],
				allTypeList: [],
			}
		},
		methods: {
			staticsSearch(e) {
				if (e == 3) {
					this.showBox = true
					this.dateShow = false
				} else {
					this.showBox = false
					this.dateShow = true
				}
				this.checkValue = e



				if (e == 0) {
					this.startDate = this.searchDate
					this.endDate = this.searchDate
				} else if (e == 1) {
					this.getWeekList()
				} else if (e == 2) {
					this.getMonthList()
				}
				this.getList()
			},
			changeBuild(e) {
				console.log(e)
				if (e.currentIndex == 0) {
					this.buildingNo = "1"
				} else if (e.currentIndex == 1) {
					this.buildingNo = "5"
				}
				this.getList()
			},
			changeDate(e) {
				this.searchDate = e
				if (this.checkValue == 0) {
					this.startDate = e
					this.endDate = e
				} else if (this.checkValue == 1) {
					this.getWeekList()
				} else if (this.checkValue == 2) {
					this.getMonthList()
				} else if (this.checkValue == 3) {

				}
				this.getList()
			},
			changeStartDate(e) {
				console.log(new Date(e).getTime())
				this.startDate = e
				if (this.startDate && this.endDate) {
					if (new Date(this.startDate).getTime() - new Date(this.endDate).getTime() > 0) {
						uni.showToast({
							title: "开始时间必须少于结束时间",
							icon: "none",
						})
						return
					}
					this.getList()
				}
			},
			changeEndDate(e) {
				this.endDate = e
				console.log(new Date(e).getTime())
				if (this.startDate && this.endDate) {
					if (new Date(this.startDate).getTime() - new Date(this.endDate).getTime() > 0) {
						uni.showToast({
							title: "开始时间必须少于结束时间",
							icon: "none",
						})
						return
					}
					this.getList()
				}

			},
			getWeekList(e) {
				var currentDate = new Date(this.searchDate)
				var timesStamp = currentDate.getTime();
				var currenDay = currentDate.getDay();
				var dates = []
				for (var i = 0; i < 7; i++) {
					dates.push(new Date(timesStamp + 24 * 60 * 60 * 1000 * (i - (currenDay + 6) % 7))
						.toLocaleDateString()
						.replace(/\//g, '-'));
				}
				this.startDate = dates[0]
				this.endDate = dates[dates.length - 1]

				console.log(this.startDate)
				console.log(this.endDate)
			},
			getMonthList(e) {
				var currentDate = new Date(this.searchDate);
				var currentMonth = currentDate.getMonth();
				var currentYear = currentDate.getFullYear();
				var startOfMonth = new Date(currentYear, currentMonth, 1);
				var endOfMonth = new Date(currentYear, currentMonth + 1, 0);
				this.startDate = parseTime(startOfMonth.getTime()).slice(0, 10)
				this.endDate = parseTime(endOfMonth.getTime()).slice(0, 10)
				console.log(this.startDate)
				console.log(this.endDate)
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
				if (this.current == 0) {
					this.attenceStauts = "4"
				} else if (this.current == 1) {
					this.attenceStauts = "2"
				} else if (this.current == 2) {
					this.attenceStauts = "6"
				} else if (this.current == 3) {
					this.attenceStauts = "5"
				}
				this.getList()
			},

			getList() {
				statistics.getStuExcAttence({
					startDate: this.startDate,
					endDate: this.endDate,
					attenceStauts: this.attenceStauts,
					buildingNo: this.buildingNo,
				}).then(res => {
					console.log(res)
					this.allTypeList = res.data

				})
			},

		},
		onLoad() {
			this.userName = uni.getStorageSync("userName")
			this.searchDate = parseTime(Date.now()).slice(0, 10)
			this.startDate = parseTime(Date.now()).slice(0, 10)
			this.endDate = parseTime(Date.now()).slice(0, 10)
			this.getList()

		}
	}
</script>

<style>
	.datePickBox /deep/.uni-date-x[data-v-6e13d7e2] {
		background-color: #e2e2e2;
		border-radius: 20rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.indexContent {
		/* height: 100vh; */
		/* background-color: #f5f5f5; */
	}

	.container {
		background-color: #f1f1f1;
		/* height: 150rpx; */
	}

	.box {
		padding: 20rpx 10rpx;
	}

	.uni-list-cell {
		display: flex;
		padding: 30rpx 40rpx;
	}

	.boxContent {
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		text-align: center;
		/* margin-top: 10rpx; */
	}

	.header {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 170rpx;
	}

	.datePickBox {
		padding: 40rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #f1f1f1;
	}

	.topContent {
		margin-top: 20rpx;
	}

	page {
		background-color: #f1f1f1;
	}

	/deep/.segmented-control[data-v-064e9cd1] {
		height: 60rpx;
	}

	/deep/.segmented-control__item--text[data-v-064e9cd1] {
		padding: 6rpx;
		border-bottom-width: 6rpx;
	}

	.listBox1 {
		/* padding: 0rpx 0; */
		width: 25%;
		text-align: center;

	}

	.listBox {
		border-left: 1rpx solid #aaa;
		width: 25%;
		text-align: center;
		/* padding: 10rpx 0; */

	}

	.check {
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
		height: 70rpx;
		line-height: 70rpx;
	}

	.pic {
		position: absolute;
		left: 10%;
		top: 100%;
	}

	/deep/.uni-date-x--border[data-v-6e13d7e2] {
		border: none;
	}

	.uni-icons[data-v-a2e81f6e] {
		font-size: 0rpx;
	}
</style>